import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { Carousel } from 'antd';

// import banner1 from '../../../../asset/images/new/banner.png';

import styles from './index.module.less';

export default class CarouselBox extends Component {
  state = {
    newPicList: [
      {
        key: 1,
        newPic: require('../../../../asset/images/new/news1.png'),
        title: '再生资源示范单位调研1',
      },
      {
        key: 2,
        newPic: require('../../../../asset/images/new/img2.png'),
        title: '再生资源示范单位调研2',
      },
      {
        key: 3,
        newPic: require('../../../../asset/images/new/news1.png'),
        title: '再生资源示范单位调研3',
      },
      {
        key: 4,
        newPic: require('../../../../asset/images/new/news1.png'),
        title: '再生资源示范单位调研4',
      },
    ],
  };
  handleNext=() => {
    this.setState(prevState => {
      const { newPicList } = prevState;

      const header = newPicList.shift();

      newPicList.push(header);

      return {
        newPicList,
      };
    });
  };
  handlePrev=() => {
    this.setState(prevState => {
      const { newPicList } = prevState;
      const last = newPicList.pop();
      newPicList.unshift(last);
      return { newPicList };
    });
  }
  render() {
    const { newPicList } = this.state;
    return (
      <div className={styles.Box}>
        <Carousel autoplay>
          {
            newPicList.map(item => {
              return (
                <div key={item.key} className={styles.imgContent}>
                  <div className={styles.imgBox}><img src={item.newPic} alt=''/></div>
                  <div className={styles.text}>{item.title}</div>
                </div>
              );
            })
          }
        </Carousel>
        <div className={styles.prev} onClick={this.handlePrev}>＜</div>
        <div className={styles.next} onClick={this.handleNext}>＞</div>
      </div>
    );
  }
}

